<template>
	<div>
		<!-- <headers />
		<div style="padding-left: 30px;padding-top: 10px;">
			<el-breadcrumb separator="/" style="text-align: right;">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>角色管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->

		<div class="goodsindex">
			<!-- 搜索条件 -->
			<el-row :gutter="20" class="goodsindex-queryInfo">
				<!-- <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
					<el-input class="goodsindex-queryInfo-li" v-model="queryInfo.name" clearable size="small"
						placeholder="请输入角色名称"></el-input>
				</el-col>
				<el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
					<el-button type="primary" class="goodsindex-queryInfo-li" size="small">搜索</el-button>
				</el-col> -->
				<el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2" v-if="isAuth('sys:role:save')">
					<el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="handleEdit()">添加
					</el-button>
				</el-col>
				<el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2" v-if="isAuth('sys:role:list')">
					<el-button size="small" class="goodsindex-queryInfo-li" type="danger" @click="handleDelete()"
						:disabled="dataListSelections.length <= 0">批量删除</el-button>
				</el-col>
			</el-row>
			<!-- 检索结果 -->
			<el-row :gutter="20" class="goodsindex-list">
				<el-col :span="24">
					<el-table :data="roleList" :height="tableMaxHeight" border size='small' @selection-change="selectionChangeHandle"
						style="width: 100%">
						<el-table-column type="index" header-align="center" align="center" label="序" width="50">
						</el-table-column>
						<el-table-column type="selection" header-align="center" align="center" width="50">
						</el-table-column>
						<el-table-column prop="roleName" header-align="center" align="center" label="角色名"
							min-width="180">
						</el-table-column>
						<el-table-column prop="createTime" header-align="center" align="center" label="创建时间" min-width="180">
						</el-table-column>
						<el-table-column width="180" prop="address" header-align="center" align="center" label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" @click="handleEdit(scope.row.roleId)">编辑
								</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.row.roleId)">删除
								</el-button>
								<!-- <el-button
							  size="mini"
							  type="primary"
							  @click="handleJurisdiction(scope.$index, scope.row)">菜单权限</el-button> -->
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
			<!-- 分页 -->
			<el-row :gutter="20" class="goodsindex-list">
				<el-col :span="24" class="goodsindex-page-box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="pageIndex" :page-sizes="[1, 10, 20, 50, 100]" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
					</el-pagination>
				</el-col>
			</el-row>
			<roleAddorUpdata v-if="roleAddorUpdataVisible" ref="roleAddorUpdata" @getRolelist="getRolelist">
			</roleAddorUpdata>
		</div>
	</div>
</template>

<script>
import headers from '../../components/header/header.vue'
import roleAddorUpdata from './role/addorupdate.vue'
export default {
	components: {
		roleAddorUpdata,
		headers
	},
	data() {
		return {
			roleAddorUpdataVisible: false,//新增 修改
			queryInfo: {
				name: '',
				type: ''
			},
			roleList: [],
			dataListSelections: [],//批量删除
			pageIndex: 1,
			pageSize:20,
			totalPage: 0,
		}
	},
	created() {
		this.getRolelist();
	},
	computed: {
        showOrHide() {
            // if(this.isAuth('')==false&&this.isAuth('')==false&&this.isAuth('')==false){
            //     this.isShowOrHide=false;
            // }
            return true;
        },
        tableMaxHeight() {
            return window.innerHeight - 180 + "px";
        },
    },
	methods: {
		//获取用户列表
		getRolelist() {
			this.Sevice({
				url: 'sys/role/list',
				method: 'get',
				params: {
					'currentPage': this.pageIndex,
					'pageSize': this.pageSize
				}
			}).then(res => {
				if (res && res.code == 200) {
					this.roleList = res.page.list;
					this.totalPage = res.page.totalCount;
				} else {
					this.roleList = [];
					this.totalPage = 0;
				}
			}).catch(err => {
				console.log(err);
			})
		},
		//修改
		handleEdit(id) {
			this.roleAddorUpdataVisible = true
			this.$nextTick(() => {
				this.$refs.roleAddorUpdata.init(id)
			})
		},
		// 多选
		selectionChangeHandle(val) {
			this.dataListSelections = val
		},
		//删除
		handleDelete(id) {
			var roleIds = id ? [id] : this.dataListSelections.map(item => {
				return item.roleId;
			})
			this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.Sevice({
					url: 'sys/role/delete',
					method: 'post',
					data: roleIds
				}).then(res => {
					if (res && res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getRolelist();
					}
				}).catch(err => {
					console.log(err);
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		// 分页
		handleSizeChange(val) {
			this.pageSize = val;
			this.getRolelist();
		},
		handleCurrentChange(val) {
			this.pageIndex = val;
			this.getRolelist();
		}

	}
}
</script>

<style scoped>
.goodsindex {
	width: 100%;
	min-height: 100%;
	padding: 15px;
	box-sizing: border-box;
}

/* 搜索 */
.goodsindex-queryInfo {
	margin-bottom: 10px;
}

.goodsindex-queryInfo-li {
	width: 100%;
	height: auto;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 列表 */
.goodsindex-list {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

/* 分页 */
.goodsindex-page-box {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: flex-end;
}
</style>